<template>
    <view class="history_details_page">
        <!-- 售后历史详情 -->
        <view class="item date">
            <text v-if="serviceDetails?.createTime">{{
                dayjs(serviceDetails.createTime).format('YYYY/MM/DD')
            }}</text>
            <text :class="['tip', serviceDetails?.status === 1 ? 'active' : 'inactive']">{{
                serviceDetails?.status === 1 ? '进行中' : '已完成'
            }}</text>
        </view>
        <view class="item serial_num"> 序列号：{{ serviceDetails?.simSerialNumber }} </view>
        <view class="item">
            <view class="label"><text class="must">*</text>问题描述</view>
            <view class="describe_box">
                <text class="describe">{{ serviceDetails?.description }}</text>
            </view>
        </view>
        <view v-if="serviceDetails?.imageUrl?.length > 0" class="item">
            <view class="tip"> 添加您认为可以更好说明问题的图片（最多4张） </view>
            <view class="problem">
                <image
                    v-for="(i, idx) in serviceDetails?.imageUrl"
                    :key="idx"
                    :src="i"
                    mode=""
                    class="problem_pic"
                    @click="previewImg(idx)"
                ></image>
            </view>
        </view>
        <view class="item">
            <view class="label"><text class="must">*</text>联系方式</view>
            <view class="phone">
                {{ serviceDetails?.phone }}
            </view>
        </view>
    </view>
</template>

<script setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs';

const serviceDetails = ref({}); // 售后历史详情
// 查看图片
function previewImg(idx) {
    uni.previewImage({
        current: idx,
        urls: serviceDetails?.value.imageUrl,
    });
}

onLoad(option => {
    if (option.details) {
        let details = JSON.parse(decodeURIComponent(option.details));
        if (details.imageUrl) {
            serviceDetails.value = {
                ...details,
                imageUrl: details.imageUrl.split(','),
            };
            return;
        }
        serviceDetails.value = { ...details };
    }
});
</script>

<style lang="scss" scoped>
.history_details_page {
    margin: 30rpx 30rpx 0;
    padding: 30rpx 30rpx 70rpx 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    color: #333;
    background-color: #fff;
    font-size: 30rpx;

    .date {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #666;
    }

    .active {
        color: #615dff;
    }

    .inactive {
        color: #a9aab5;
    }

    .item {
        margin-bottom: 32rpx;

        .label {
            margin-bottom: 14rpx;
            font-weight: 500;
        }

        .tip {
            font-size: 26rpx;
        }

        .serial_num {
            font-size: 32rpx;
        }

        .must {
            color: red;
        }

        .problem {
            display: flex;
            margin-top: 16rpx;

            &_pic {
                margin-right: calc((100vw - 460rpx) / 4);
                width: 100rpx;
                height: 100rpx;

                &:last-child {
                    margin-right: 0 !important;
                }
            }
        }

        .describe_box {
            padding: 30rpx 20rpx;
            box-sizing: border-box;
            height: 274rpx;
            border-radius: 16rpx;
            background-color: #f9f9fb;
            color: #666;

            .describe {
                display: block;
                height: 214rpx;
                overflow: auto;
                word-break: break-all;
            }
        }

        .phone {
            padding: 24rpx 20rpx;
            background-color: #f9f9fb;
            border-radius: 16rpx;
        }
    }
}
</style>
